<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">

<!-- 
 * Simplex Admin Template - Version 1.0
 *
 * Copyright 2011, Prosoftware.pl Dominik Cwiklik
 * @see http://www.prosoftware.pl/simplex-admin-template/
 * @license MIT http://www.opensource.org/licenses/mit-license.php
 *
 * Includes jQuery | http://jquery.com/ | Copyright 2011, John Resig | Dual licensed under the MIT or GPL Version 2 licenses.
 * Includes Uni-form | http://sprawsm.com/uni-form/ | Copyright (c) 2010, Dragan Babic | Released under the MIT License.
 * Includes Facebox | http://defunkt.io/facebox/ | Copyright (c) 2007/2008 Chris Wanstrath  | Released under the MIT License.
 *
 * Date: Fri Mar 25 00:29:24 2011
-->

<head>
	<title>Simplex Admin Demonstration</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css" media="screen">@import "css/simplex.pack-default.css";</style>
</head>

<body>

	<div id="container" class="use-sidebar">
		
		<div id="header">
			
			<div id="header-right">
				<ul class="clearfix">
					<li class="first">Logged as <a href="#">username</a></li>
					<li class="inside"><a href="#">Settings</a></li>
					<li class="inside"><a href="#">Messages</a><span class="hotCount"><a href="#" title="You have 4 unread messages.">4</a></span></li>
					<li class="last"><a href="index.html">Logout</a></li> 
				</ul>
			</div>
			
			<div id="logo">
				<div class="logoAsText"><a href="demo.html">Simplex Admin</a></div>
			</div> 
			
			<div id="top-nav">
			
				<ul>
					<li class="t"><a href="demo.html">Homepage</a></li>
					<li class="t hasChilds"><a href="">More</a>
					
						<ul class="top-nav-sub">
							<li><a href="forms.html">Other forms</a></li>
						</ul>
					
					</li>
				</ul>
				
			</div>
			
		</div>
		
		<div id="sidebar">
		
			<div id="left-menu">
		
				<div class="menu-box">
				 
				  <h4 class="title">Mailbox</h4>
				  
				  <ul class="actions-list">
				    <li class="menu-ico newmail"><a href="#">Inbox</a></li>
				    <li class="menu-ico pen"><a href="#">Compose</a></li>
				    <li class="menu-ico talk"><a href="#">Chat</a></li>
				    <li class="menu-ico calendar"><a href="#">Calendar</a></li>
				  </ul>
				  
				</div>
				
				<div class="menu-box">
				  
				  <h4 class="title">Actions</h4>
				  
				  <ul class="actions-list">
				    <li><a href="#">Draft Invoice</a></li>
				    <li><a href="#">Draft Estimate</a></li>
				    <li><a href="#">Create Project</a></li>
				    <li><a href="#">Track Time</a></li>
				    <li><a href="#">Log Expense</a></li>
				    <li><a href="#">Manage Tasks</a></li>
				  </ul>
				  
				</div>
			
			</div>
			
			<a id="separator" href="#" title="Toggle sidebar"></a>
			
		</div> 
		
		<div id="content">
		
			<h1 class="title">What's up?</h1>
		
			<div class="round">
			    <div class="round-head">
					<h2>System modules</h2>
				</div>
		
				<div class="round-content">
					
					<div id="icondock">
					
						<ul>
							<li><a href="#" rel="tipsy" title="Show events on calendar"><img src="img/icons/calendar.png" alt="Calendar"><br>Calendar</a></li> 
							<li><a href="#" rel="tipsy" title="Show photos"><img src="img/icons/photos.png" alt="Photos"><br>Photos</a></li>
							<li><a href="#" rel="tipsy" title="Show address book"><img src="img/icons/address_book.png" alt="Address book"><br>Address book</a></li>
							<li><a href="#" rel="tipsy" title="Show statistics"><img src="img/icons/data_2.png" alt="Statistics"><br>Statistics</a></li>
							<li><a href="#" rel="tipsy" title="Show account preferences"><img src="img/icons/preferences.png" alt="Preferences"><br>Preferences</a></li>
						</ul>
						
						<div class="clear"></div>
					  
					</div>
					
				</div>
				
			</div>
		
			<div class="round half left">
			    <div class="round-head">
					<h2>Left box</h2>
				</div>
			    
				<div class="round-content">
				
					<h1>H1 Paragraph</h1>
					
					<p>Style sheets have existed in one form or another since the beginnings of SGML in the 1970s. Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents. As HTML grew, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers. This evolution gave the designer more control over site appearance but at the cost of HTML becoming more complex to write and maintain.</p>
					
					<h2>H2 Paragraph</h2>
					<p>Variations in web browser implementations i.e. ViolaWWW and WorldWideWeb made consistent site appearance difficult, and users had less control over how web content was displayed. Robert Cailliau wanted to separate the structure from the presentation. </p>
					
					<h3>H3 Paragraph</h3>
					<p>The ideal way would be to give the user different options and transferring three different kinds of style sheets: one for printing, one for the presentation on the screen and one for the editor feature. </p>
					
					<p>Source: <a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">http://en.wikipedia.org/wiki/Cascading_Style_Sheets</a></p>
				
				</div>
				
			</div>
			
			<div class="round half right">
			    <div class="round-head">
					<h2>Right box</h2>
				</div>
			    
				<div class="round-content">
				
					<h1>Tabs</h1>
					
					<div id="tabs">
						
						<ul class="tabs-menu">
							<li><a href="#fragment-1"><span>One</span></a></li>
							<li><a href="#fragment-2"><span>Two</span></a></li>
							<li><a href="#fragment-3"><span>Three</span></a></li>
						</ul>
						
						<div class="tabs-content" style="min-height: 212px;">
						
							<div id="fragment-1">
								<p>
									<h3>Crossbrowser compatible</h3>
								</p>
								
								<p>Cross-browser refers to the ability for a website, web application, HTML construct or client-side script to support all the web browsers. Multi-browser is a new paradigm in a web development that allows a website or web application to provide more functionality over several web browsers, while ensure that the website or web application is accessible to the largest possible audience without any loss in performance. Cross-browser is a support that allows a website or web application to properly rendered by all browsers.</p>
							</div>
							<div id="fragment-2">
							
								<h3>Unordered list</h3>
								<p>The ideal way would be to give the user different options and transferring three different kinds of style sheets:</p>
								
								<ul>
									<li>one for printing</li>
									<li>one for the presentation on the screen</li>
									<li>one for the editor feature.</li>
								</ul>
							</div>
							
							<div id="fragment-3">
								<h3>Ordered list</h3>
								<p>The ideal way would be to give the user different options and transferring three different kinds of style sheets:</p>
								
								<ol>
									<li>one for printing</li>
									<li>one for the presentation on the screen</li>
									<li>one for the editor feature.</li>
								</ol>
							</div>
						
						</div>
						
					</div>
				
				</div>

			</div>
		
			<div class="round half left">
			    <div class="round-head">
					<h2>Small form</h2>
				</div>
			    
				<div class="round-content">
				
					<form action="#" class="uniForm"> 
						<fieldset> 
							<p class="disclaimer">This is an example form formatted with Uni–Form markup and CSS. Submitting it does nothing.</p> 
							<div class="ctrlHolder"> 
								<label for="name3">Your name</label> 
								<input type="text" id="name3" name="name3" value="" size="35" class="textInput"/> 
							</div> 
							
							<div class="ctrlHolder"> 
								<label for="email3">E–mail address</label> 
								<input type="text" id="email3" name="email3" value="" size="35" class="textInput"/> 
								<p class="formHint">Use a real email address that you often check for messages</p> 
							</div> 
							
							<div class="ctrlHolder"> 
								<p class="label">Age</p> 
								<ul class="blockLabels"> 
									<li><label for="age_1"><input type="radio" id="age_1" name="age"/> I'm under 18</label></li> 
									<li><label for="age_2"><input type="radio" id="age_2" name="age" checked="checked"/> 18–30</label></li> 
									<li><label for="age_3"><input type="radio" id="age_3" name="age"/> 30 and over</label></li> 
								</ul> 
							</div> 
							
							<div class="buttonHolder"> 
								<button type="submit" class="primaryAction">Save form</button> 
							</div> 
						</fieldset> 
					</form>
				
				</div>
				
			</div>
			
			<div class="round half right">
			    <div class="round-head">
					<h2>Small form (inline)</h2>
				</div>
			    
				<div class="round-content">
				
					<div class="error icon">This is a sample message</div>
				
					<form action="#" class="uniForm"> 
						<fieldset class="inlineLabels">
							 
							<div class="ctrlHolder"> 
								<label for="name3">Your name</label> 
								<input type="text" id="name3" name="name3" value="" size="35" class="textInput"/> 
							</div> 
							
							<div class="ctrlHolder"> 
								<label for="email3">E–mail address</label> 
								<input type="text" id="email3" name="email3" value="" size="35" class="textInput"/> 
								<p class="formHint">Use a real email address that you often check for messages</p> 
							</div> 
							
							<div class="ctrlHolder"> 
								<p class="label">Age</p> 
								<ul class="blockLabels"> 
									<li><label for="age_1"><input type="radio" id="age_1" name="age"/> I'm under 18</label></li> 
									<li><label for="age_2"><input type="radio" id="age_2" name="age" checked="checked"/> 18–30</label></li> 
									<li><label for="age_3"><input type="radio" id="age_3" name="age"/> 30 and over</label></li> 
								</ul> 
							</div> 
							
							<div class="buttonHolder">  
								<button type="submit" class="primaryAction">Save form</button> 
							</div> 
						</fieldset> 
					</form> 
				
				</div>
				
			</div>
			
			<div class="clear"></div>
		
			<div class="round">
			    <div class="round-head">
					<h2>Sample data table</h2>
					<div class="right"> 
						<a class="filter-button" href="" title="Add filters">Add filters</a>
						<input class="search" type="text" value="Search..." onclick="this.value=''" title="Search string" /> 
					</div>
				</div>


				<div class="round-content">
				
					<div class="hidden filter-boxes">
						
						<form>
						
							<div class="filter-item">
								<label>Name</label>
								<input type="text" />
							</div>
							
							<div class="filter-item">
								<label>Type</label>
								<select multiple="multiple"><option>All records</option><option>Only publicated</option><option>Only deleted</option></select>
							</div>
							
							<div class="filter-item">
								<label>Publication date</label>
								From: <input class="date-input" type="text" />
								To: <input class="date-input" type="text" />
							</div>
							
							<div class="cl">
								<input type="button" class="btn filter-send" value="Filter results" /> <a class="filter-reset-button" href="" title="Reset filters">Reset filters</a> | <a class="filter-button" href="" title="Hide filters">Hide filters</a>
							</div>
						
						</form>
						
					</div>
					
					<table class="table-a" summary="Table">
						<thead>
							<tr>
								<th scope="col" class="chb"><input class="chall" type="checkbox" /></th>
								<th scope="col">Employee</th>
								<th scope="col">Salary</th>
								<th scope="col">Bonus</th>
								<th scope="col">Supervisor</th>
								<th scope="col" style="width: 65px;">Options</th>
							</tr>
						</thead>
						
						<tbody>
							<tr>
								<td><input type="checkbox" /></td>
								<td>Stephen C. Cox</td>
								<td>$300</td>
								<td>$50</td>
								<td>Bob</td>
								<td>
									<a href="#" class="table-icon edit" title="Edit"></a>
									<a href="#" class="table-icon delete" title="Delete"></a>
									<a href="#" class="table-icon download" title="Download"></a>
								</td>
							</tr>
							
							<tr>
							<td><input type="checkbox" /></td>
								<td>Josephin Tan</td>
								<td>$150</td>
								<td>-</td>
								<td>Annie</td>
								<td>
									<a href="#" class="table-icon edit" title="Edit"></a>
									<a href="#" class="table-icon delete" title="Delete"></a>
									<a href="#" class="table-icon download" title="Download"></a>
								</td>
							</tr>
							
							<tr>
								<td><input type="checkbox" /></td>
								<td>Joyce Ming</td>
								<td>$200</td>
								<td>$35</td>
								<td>Andy</td>
								<td>
									<a href="#" class="table-icon edit" title="Edit"></a>
									<a href="#" class="table-icon delete" title="Delete"></a>
									<a href="#" class="table-icon download" title="Download"></a>
								</td>
							</tr>
							
							<tr>
								<td><input type="checkbox" /></td>
								<td>James A. Pentel</td>
								<td>$175</td>
								<td>$25</td>
								<td>Annie</td>
								<td>
									<a href="#" class="table-icon edit" title="Edit"></a>
									<a href="#" class="table-icon delete" title="Delete"></a>
									<a href="#" class="table-icon download" title="Download"></a>
								</td>
							</tr>
						</tbody>
					</table>
					
					<div class="tab-bottom-menu">
						<h4>Change status for selected items:</h4>
						
						<ul>
							<li><select><option>Select new bonus</option><option>10$</option><option>20$</option><option>30$</option><option>50$</option></select> <a href="#" class="btn btn-gray">Save</a></li> 
						</ul> 
						
					</div>
					
					<div class="tab-summary">
						
						<div class="pagination-count">
							<strong>Page 1 of 6 </strong>
							<span class="s">Users: 1 - 1 of 6</span>
						</div>
						
						<div class="pagination">
							<div class="resultsInfo">
								<span class="first">« First</span>
								<span class="prev">‹ Prev</span>
								<span class="active">1</span>
								<a href="#2">2</a>
								<a href="#3">3</a>
								<a class="next" href="#next">Next ›</a>
								<a class="last" href="#last">Last »</a>
							</div>
					
						</div>
						
						<div class="closePagination"></div>
						
					</div>
					
				</div>
				
			</div>
		
		
			<div class="round">
				<div class="round-head">
					<h2>Messages</h2>
				</div>
			
				<div class="round-content">
					<div class="notice icon">This is a sample message</div>
					
					<div class="error icon">This is a sample message</div>
					
					<div class="success icon">
						<h4>Congratulations!</h4>
						This is a sample message
					</div>
					
					<div class="notice icon clickClose">This is a sample message with click event</div>
					
				</div>
			</div>	

			<div class="round gallery">
				<div class="round-head">
					<h2>Photo gallery</h2>
				</div>
			
				<div class="round-content">
					
					<p>This gallery is based on FancyBox 1.3.4 library</p>
					
					<a rel="gallery-1" title="Custom image title" href="img/photos/p1.jpg"><img alt="" src="img/photos/p1s.jpg" /></a>
					<a rel="gallery-1" title="Custom image title" href="img/photos/p2.jpg"><img alt="" src="img/photos/p2s.jpg" /></a>
					<a rel="gallery-1" title="Custom image title" href="img/photos/p3.jpg"><img alt="" src="img/photos/p3s.jpg" /></a>
					<a rel="gallery-1" title="Custom image title" href="img/photos/p4.jpg"><img alt="" src="img/photos/p4s.jpg" /></a>
					<a rel="gallery-1" title="Custom image title" href="img/photos/p5.jpg"><img alt="" src="img/photos/p5s.jpg" /></a>
					<a rel="gallery-1" title="Custom image title" href="img/photos/p6.jpg"><img alt="" src="img/photos/p6s.jpg" /></a>
					<a rel="gallery-1" title="Custom image title" href="img/photos/p7.jpg"><img alt="" src="img/photos/p7s.jpg" /></a>
					<a rel="gallery-1" title="Custom image title" href="img/photos/p8.jpg"><img alt="" src="img/photos/p8s.jpg" /></a>
					<a rel="gallery-1" title="Custom image title" href="img/photos/p9.jpg"><img alt="" src="img/photos/p9s.jpg" /></a>
					<a rel="gallery-1" title="Custom image title" href="img/photos/p10.jpg"><img alt="" src="img/photos/p10s.jpg" /></a>
					
				</div>
			</div>	

		</div>
		<!-- #content end -->
		
		<br class="clear" />
		
		<div id="footer">
			<div class="float-left">&copy; 2011 Prosoftware.pl</div>
			<div class="float-right"><a href="" class="backtotop">Scroll to top</a></div>
			<div class="clear"></div>
		</div>
		
	</div>


	<!-- scripts -->
	<script src="js/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
	<script src="js/jquery/jquery-ui.min.js" type="text/javascript"></script>
	<script src="js/jquery/jquery.cookie.js" type="text/javascript"></script>
	<script src="js/jquery/jquery.tipsy.js" type="text/javascript"></script>
	<script src="js/jquery/jquery.simplyscroll-1.0.4.min.js" type="text/javascript"></script>
	<script src="js/jquery/jquery.mousewheel-3.0.4.pack.js" type="text/javascript" ></script>
	<script src="js/jquery/jquery.fancybox-1.3.4.pack.js" type="text/javascript" ></script>
	<script src="js/facebox/facebox.js" type="text/javascript"></script>
	<script src="js/uni-form/uni-form-validation.jquery.min.js" type="text/javascript" ></script>
	
	<script src="js/simplex.sidebar.js" type="text/javascript"></script>
	<script src="js/simplex.default.js" type="text/javascript"></script>
	<!-- /scripts -->

</body>
</html>
